<template>
<div >
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card   shadow="hover" :body-style="{ padding: '0px' }">
        <div class="card-content" >
          <div class="card-left">
            <i class="el-icon-user" ></i>
          </div>
          <div class="card-right">
            <div class="card-num" >{{ patientCount }}</div>
            <div>现有病人数</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <div class="card-content">
          <div class="card-left">
           <i class="el-icon-s-custom"></i>
          </div>
          <div class="card-right">
            <div class="card-num">{{ okCount }}</div>
            <div>入住总人次</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <div class="card-content">
          <div class="card-left">
            <i class="el-icon-c-scale-to-original"></i>
          </div>
          <div class="card-right">
            <div class="card-num">{{ peopleCount }}</div>
            <div>男女人数比</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <div class="card-content">
          <div class="card-left">
            <i class="el-icon-s-home"></i>
          </div>
          <div class="card-right">
            <div class="card-num">{{ inCount }}</div>
            <div>今日入住人数</div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <h3>性别比例</h3>
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="Sex1"></el-card>
    </el-col>
    <el-col :span="12">
      <h3>每日新增人数</h3>
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="inc"></el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <h3>每日康复人数</h3>
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="Bli"></el-card>
    </el-col>
    <el-col :span="12">
      <h3>每日累计人数</h3>
      <el-card class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="count1"></el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "InfoPage",
  data(){
    return{
      patientCount:"23",
      okCount:"60",
      peopleCount:'11:12',
      inCount:'3',
      //Sex1的数据
      sexd:[
            {
              value: 0,
              name: "男",
            },
            {
              value: 0,
              name: "女",
            }
      ],
      //inc的数据
      category : [
        "5.29",
        "5.30",
        "6.1",
        "6.2",
        "6.3",
        "6.4",
        "6.5",
      ],
      barData:[1, 4, 6, 0, 2, 3, 2],
      //Bli的数据
      category2 : [
        '5.29',
        "5.30",
        "6.1",
        "6.2",
        "6.3",
        "6.4",
        "6.5",
      ],
      barData2:[36, 40, 46, 46, 48, 51, 53],
      //count1的数据

      category3 : [
        "5.29",
        "5.30",
        "6.1",
        "6.2",
        "6.3",
        "6.4",
        "6.5",
      ],
      barData3:[3, 2, 0, 1, 2, 3,4],
    }
  },
  created(){
    axios.post('http://localhost:8080/index/getAllMessage').then(res=>{
      this.patientCount=res.data.patientCount;//现有病人数
      this.okCount=res.data.okCount;//入住总人数
      this.peopleCount=res.data.peopleCount;//在站男女比例（传男女人数比eg:21:30,string类型）
      this.inCount=res.data.inCount;//今日入住人数
      this.sexd=res.data.sexd;
      let i=0;
      for(let item of res.data.category) {
        this.category[i] = item;//每日新增人数的日期
        this.category2[i] =item;//每日康复人数的日期
        this.category3[i] =item;//每日累计总人数的日期（这三个其实一样，但要传三个）
        i++;
      }
      this.barData = res.data.barData;//每日新增人数（只传最近一周的，固定大小）
      this.barData2 = res.data.barData2;//每日康复人数（只传最近一周的，固定大小）
      this.barData3 = res.data.barData3;//每日累计总人数只传最近一周的，固定大小）
      this.initEcharts1();
      this.initEcharts2();
      this.initEcharts3();
      this.initEcharts4();
    })
  },
  mounted() {
    this.initEcharts1();
    this.initEcharts2();
    this.initEcharts3();
    this.initEcharts4();
  },
  methods:{
    initEcharts1(){
      const option = {
        title:{
          text:'在站男女比',
        },
        series:[
          {
            type: "pie",
            data: this.sexd
          }
        ]
      };
      const Sex1 = echarts.init(document.getElementById("Sex1"));// 图标初始化
      Sex1.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        Sex1.resize();
      });
    },
    initEcharts2() {
      const option = {
        title:{
          text:'每日新增',
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: { show: false },
          axisLabel: { show: false },
        },
        yAxis: {
          type: "category",
          data: this.category,
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: this.barData,
            barWidth: 14,
            barGap: 10,
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "right",
                offset: [5, -2],
                textStyle: {
                  color: "#333",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#3977E6" },
                  { offset: 1, color: "#37BBF8" },
                ]),
              },
            },
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("inc"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      })
    },
    initEcharts3(){
      const option = {
        title:{
          text:'每日累计人数',
        },
        xAxis: {
          data: this.category3
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.barData3
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("count1"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      })
    },
    initEcharts4(){
      const  option={
        title:{
          text:'每日康复人数',
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.category2,
        },
        yAxis: {
          type: "value",
        },

        series: [
          {
            name: "每日康复人数",
            type: "line",
            data: this.barData2,
          },
        ],
      };
      const myChart = echarts.init(document.getElementById("Bli"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      })
    }
  },
}
</script>

<style scoped>
.el-card {
  min-width: 380px;
  margin-right: 20px;
  transition: all .5s;
}
.el-card:hover{
  margin-top: -5px;
}
.card-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100px;
  padding-left: 20%;
  text-align: center;
}

.card-left {
  display: flex;
  font-size: 3rem;
}

.card-right {
  flex: 1;
  font-size: 14px;
}

.card-num {
  font-size: 30px;
  font-weight: bold;
  background-color: #ffffff;
}

h3 {
  margin: 10px 0;
  text-align: center;
}
.cav-info {
  border-radius: 6px;
  overflow: hidden;
  height: 250px;
background-color: #ffffff;
}
</style>
